<template>
  <div class="blog-card">
    <img src="../../assets/images/blog_auth.jpg" alt="头像背景" class="card-img">
    <div class="card">
      <img :src="blogCard.avatar" alt="头像" class="avatar">
    </div>
    <h3 class="card-name">{{ blogCard.nickname || '匿名' }}</h3>
    <p class="card-content">{{ blogCard.bio }}</p>
    <div class="social-icons">
      <div
        class="iconfort"
        @mouseenter="showQRCode('wechat')"
        @mouseleave="hideQRCode"
      >
        <a href="javascript:;" title="微信" rel="nofollow" class="wechat icon">
          <i class="fab fa-weixin"></i>
        </a>
        <div class="qr-code" v-if="showWeChatQRCode">
          <img :src="blogCard.wechat_qrcode" width="150" height="150" alt="微信二维码" />
          <span>扫码添加博主微信</span>
        </div>
      </div>
      <div class="iconfort">
        <a href="https://github.com/baixingqiang2/" title="GitHub" class="github icon">
          <i class="fab fa-github"></i>
        </a>
      </div>
      <div class="iconfort">
        <a href="https://mail.qq.com/" title="邮件" class="email icon">
          <i class="fas fa-envelope"></i>
        </a>
      </div>
         <div
        class="iconfort"
        @mouseenter="showQRCode('qq')"
        @mouseleave="hideQRCode"
      >
        <a href="javascript:;" title="QQ" rel="nofollow" class="qq icon">
          <i class="fab fa-qq"></i>
        </a>
        <div class="qr-code" v-if="showQQQRCode">
          <img :src="blogCard.qq_qrcode" width="150" height="150" alt="QQ二维码" />
          <span>扫码添加博主QQ</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'BlogCard',
  data() {
    return {
      blogCard: {
        nickname: '',
        avatar: '',
        bio: '',
        wechat_qrcode: '',
        qq_qrcode: '',},
      showWeChatQRCode: false,
      showQQQRCode: false,
    };
  },
  created() {
    // 调用接口获取站长信息
    axios.get('/api/accounts/auth/blogInfo/')
      .then(response => {
        // 假设API返回的数据格式如下
        this.blogCard = response.data;
      })
      .catch(error => {
        console.error('获取数据失败：', error);
      });
  },
  methods: {
    showQRCode(type) {
      if (type === 'wechat') {
        this.showWeChatQRCode = true;
      } else if (type === 'qq') {
        this.showQQQRCode = true;
      }
    },
    hideQRCode() {
      this.showWeChatQRCode = false;
      this.showQQQRCode = false;
    }
  }
};
</script>

<style scoped>
.blog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 0 0 20px 0;
  border-radius: 5px;
  background-color: var(--card-bg-color, #fff);
}

.card-img {
  width: 100%;
  max-height: 152px; /* 自适应 */
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}

.card {
  margin-top: -75px;
}

.avatar {
  object-fit: cover;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 35px;
  margin-bottom: 10px;
}

.card-name {
  font-size: 24px; /* 主标题的字体大小 */
  font-weight: bold; /* 加粗 */
  color: var(--card-text-color, #333); /* 主标题颜色 */
  margin: 0; /* 消除默认外边距 */
  padding: 0; /* 消除默认内边距 */
}
.card-name::after {
    margin-left: 5px; /* 标题下方的分割线 */
    padding: 1.5px 4px;
    border-radius:5px;
    background: #00a4ff;
    color: var(--card-hover-color, #fff)!important;
    content: "博主";
    font-size: 11px;
    top: -1px;
    position: relative;
}

.card-content {
  font-size: 18px; /* 内容字体大小 */
  font-family: 'STXingkai', serif; /* 使用楷体或其他合适的字体 */
  font-weight: normal; /* 正常字体粗细 */
  color: var(--card-content-color, #666); /* 内容颜色 */
  margin: 10px; /* 顶部间距 */
  line-height: 1.5; /* 行高，增强可读性 */
}

.social-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 10px; /* 底部间距 */
  gap: 10px;
}
.iconfort {
  margin: 0 5px; /* 右侧间距 */
  position: relative; /* 为二维码提供定位上下文 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.wechat{
  border: 1px solid #00bf03; /* 微信图标边框 */
  border-radius: 50%; /* 圆角 */
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa-weixin{
  color: #00bf03; /* 微信图标颜色 */
}

.qq{
  border: 1px solid #007bff; /* QQ图标边框 */
  border-radius: 50%; /* 圆角 */
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa-qq{
  color: #007bff; /* QQ图标颜色 */
}
.github{
  border: 1px solid var(--card-text-color, #666); /* GitHub图标边框 */
  border-radius: 50%; /* 圆角 */
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa-github{
  color:var(--card-text-color, #666); /* GitHub图标颜色 */
}

.email{
  border: 1px solid #fc7a00; /* 邮件图标边框 */
  border-radius: 50%; /* 圆角 */
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa-envelope{
  color: #fc7a00; /* 邮件图标颜色 */
}
.icon{
  font-size: 24px; /* 图标大小 */
}
.fa-weixin:hover,
.fa-qq:hover,
.fa-github:hover,
.fa-envelope:hover{
 font-size: 28px; /* 图标大小 */
}

.qr-code {
  position: absolute;
  top: 50px; /* 根据需要调整位置 */
  left: 0;
  background-color: white; /* 背景色 */
  border: 1px solid #888; /* 边框 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文字居中 */
  z-index: 1000; /* 确保在图标上方显示 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qr-code span {
  font-size: 12px; /* 二维码文字大小 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 文字颜色 */
}

.qr-code img {
  max-width: 100px; /* 设置二维码最大宽度 */
  max-height: 100px; /*  /* 自适应 */
}
</style>

